<template>
    <view class="page-loading flex flex-col" v-show="show" :style="{ top: top }">
        <uxt-progress
            :bg-color="color"
            :progress="progress"
            :showProgress="false"
            :styles="{ position: 'absolute', height: '4rpx' }"
        ></uxt-progress>
        <uxt-icon
            :color="color"
            class="margin-top-xs"
            :styles="{ position: 'absolute', right: '10rpx' }"
            animation="pulse"
            type="circle-o-notch"
        ></uxt-icon>
    </view>
</template>

<script>
import baseMixin from '../mixins/base.js'
import uxtProgress from './uxt-progress.vue'
import uxtIcon from './uxt-icon.vue'

export default {
    name: 'uxt-bar',
    mixins: [baseMixin],
    components: {
        uxtProgress,
        uxtIcon
    },
    props: {
        // 控制显示与隐藏
        show: {
            type: Boolean,
            default: false
        },
        color: {
            default: 'red'
        }
    },
    data() {
        return {
            progress: 0,
            tid: null,
            top: `${this.systemInfo.statusBarHeight}px`
        }
    },
    watch: {
        show(newVal, oldVal) {
            if (newVal) {
                this.start()
            } else {
                this.end()
            }
        }
    },
    methods: {
        start(ms) {
            if (this.progress === 0) {
                this.$emit('start')
            }
            this.progress += (100.0 * 100) / (ms || 5000)
            if (this.progress < (ms > 0 ? 100 : 91)) {
                this.tid = setTimeout(() => {
                    this.start(ms)
                }, 100)
            } else if (ms > 0) {
                this.progress = 0
            }
        },
        end() {
            clearTimeout(this.tid)
            this.start(1000)
            this.$emit('end')
        }
    },
    mounted() {
        this.show && this.start()
    }
}
</script>

<style lang="scss" scoped>
.page-loading {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
}
</style>
